import React, { Component } from "react"
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'
import { deviceWidth } from "../../../../util"
import navigationhelper from "../../../../components/navigationhelper"
import Layer from "src/components/Layer";
import { inject } from "mobx-react/native"

@inject('userAuth')

export default class HomeCenter extends Component {
    render() {
        var data = this.props.nav
        const {level} = this.props.userAuth.currentUser
        return (
            <View style={styles.itemList}>
                {
                    data.map(function (item, index) {
                        return <RenderItem key={index} item={item} action={() => {
                            if (item.redirect_type === 'webview') {
                                navigationhelper.navigate('Web', { url: item.path, title: item.title })
                            } else {
                                if (item.path == '') {
                                    return Layer.showMsg(`${item.title}暂未开通`);
                                }
                                if(item.path == "MemberCenter" && level == 2){
                                    return Layer.showMsg('您已是会员');
                                }
                                else{
                                    navigationhelper.navigate(item.path)
                                }
                            }
                        }} />
                    })

                }
            </View>

        )
    }
}

// 中间的小按钮
function RenderItem(props) {
    return (
        <TouchableOpacity
            style={styles.itemButton}
            onPress={props.action}
            changeOpacity>
            <Image
                style={{ width: 45, height: 45 }}
                source={{ uri: props.item.icon }} />
            <Text style={{ fontSize: 12, lineHeight: 17, color: '#2E2E2E', fontFamily: 'PingFang SC', marginTop: 3 }}>{props.item.title}</Text>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    itemButton: {
        justifyContent: 'space-between',
        alignItems: 'center',
        width: deviceWidth / 4,
        height: 65,
        marginTop: 20
    },
    itemList: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginBottom: 10
    }
})